<template>
  <div class="it-picker-days">
    <div class="it-date-picker-popover-header">
      <span class="it-date-picker-prev" @click="changeMonth(-1)">‹</span>
      <span class="it-date-picker-info" @click="changeMode">
        {{ showFormatDate.year }}年{{ showFormatDate.month }}月</span
      >
      <span class="it-date-picker-next" @click="changeMonth(1)">›</span>
    </div>
    <div class="it-date-picker-popover-content">
      <div class="it-date-picker-days">
        <div class="it-date-picker-weeks">
          <div
            v-for="week in weeks"
            :key="week"
            class="it-date-picker-week-cell"
          >
            {{ week }}
          </div>
        </div>
        <div
          v-for="(row, i) in getDays"
          :key="`${row}-${i}`"
          class="it-date-picker-days-row"
        >
          <div
            v-for="(cell, j) in row"
            :key="`${cell}-${j}`"
            class="it-date-picker-days-cell"
            :class="dayClasses(cell)"
            @click="onClickDay(cell)"
          >
            {{ getDay(cell) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  cloneDate,
  getCurrentMonthLastDay,
  getPrevMonthLastDay,
  getYearMonthDay,
} from './date'
import { toMatrix } from './util'

import { ref, computed } from 'vue'

const props = defineProps({
  formatDate: {
    type: [Object, String],
    default: () => {
      return {}
    },
  },
})
let weeks = ['日', '一', '二', '三', '四', '五', '六']

const tempValue = ref(props.formatDate)

const showFormatDate = computed(() => {
  const [year, month, day] = getYearMonthDay(tempValue.value)
  return { year, month: month + 1, day }
})

const emits = defineEmits(['time-choose', 'mode-change'])

const getDays = computed(() => {
  const [year, month] = getYearMonthDay(tempValue.value)
  // 0 ~ 6, 需要将0转换为7
  let startWeek = new Date(year, month, 1).getDay()
  if (startWeek === 0) {
    startWeek = 7
  }
  const prevLastDay = getPrevMonthLastDay(year, month)
  const curLastDay = getCurrentMonthLastDay(year, month)
  const days = [
    ...getPrevMonthDays(prevLastDay, startWeek),
    ...getCurrentMonthDays(curLastDay),
    ...getNextMonthDays(curLastDay, startWeek),
  ]
  return toMatrix(days, 7)
})

const changeMonth = (value) => {
  const [, month] = getYearMonthDay(tempValue.value)
  const timestamp = cloneDate(tempValue.value).setMonth(month + value)
  tempValue.value = new Date(timestamp)
}
const dayClasses = (cell) => {
  return {
    prev: cell.status === 'prev',
    next: cell.status === 'next',
    active: isSameDay(cell.date, props.formatDate),
    today: isToday(cell.date),
  }
}
const onClickDay = (cell) => {
  emits('time-choose', { mode: 'Picker-Days', value: cell.date })
}
const isSameDay = (date1, date2) => {
  const [y1, m1, d1] = getYearMonthDay(date1)
  const [y2, m2, d2] = getYearMonthDay(date2)
  return y1 === y2 && m1 === m2 && d1 === d2
}
const isToday = (date) => {
  const [y1, m1, d1] = getYearMonthDay(date)
  const [y2, m2, d2] = getYearMonthDay()
  return y1 === y2 && m1 === m2 && d1 === d2
}
const getPrevMonthDays = (prevLastDay, startWeek) => {
  const [year, month] = getYearMonthDay(tempValue.value)
  const prevMonthDays = []
  for (let i = prevLastDay - startWeek + 1; i <= prevLastDay; i++) {
    prevMonthDays.push({
      date: new Date(year, month - 1, i),
      status: 'prev',
    })
  }
  return prevMonthDays
}
const getCurrentMonthDays = (curLastDay) => {
  const [year, month] = getYearMonthDay(tempValue.value)
  const curMonthDays = []
  for (let i = 1; i <= curLastDay; i++) {
    curMonthDays.push({
      date: new Date(year, month, i),
      status: 'current',
    })
  }
  return curMonthDays
}
const getNextMonthDays = (curLastDay, startWeek) => {
  const [year, month] = getYearMonthDay(tempValue.value)
  const nextMonthDays = []
  for (let i = 1; i <= 42 - startWeek - curLastDay; i++) {
    nextMonthDays.push({
      date: new Date(year, month + 1, i),
      status: 'next',
    })
  }
  return nextMonthDays
}
const getDay = (cell) => {
  return cell.date.getDate()
}

const changeMode = () => {
  emits('mode-change', 'Picker-Years')
}
</script>

<style scoped>
@import url('./data-picker.css');
</style>
